<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="文章标题">
        <el-input class="w500" v-model="form.title" placeholder="例如：文章标题"></el-input>
      </el-form-item>
      <el-form-item label="简略标题">
        <el-input class="w500" v-model="form.shortname" placeholder="例如：标题"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input class="w500" v-model="form.author"></el-input>
      </el-form-item>
      <el-form-item label="文章分类">
        <el-cascader clearable change-on-select v-model="cateIds" :options="tree" :props="defaultProps" :show-all-levels="false"></el-cascader>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input class="w500" v-model="form.keywords" placeholder="例如：关键字"></el-input>
      </el-form-item>
      <el-form-item label="描述介绍">
        <el-input class="w500" v-model="form.description" placeholder="例如：描述介绍"></el-input>
      </el-form-item>
      <el-form-item label="跳转地址">
        <el-input class="w500" v-model="form.jump_url" placeholder="例如：http://www.baidu.com"></el-input>
      </el-form-item>
      <el-form-item label="来源">
        <el-input class="w500" v-model="form.source" placeholder="例如：http://www.baidu.com"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <el-input class="w100" v-model="form.order" type="number"></el-input>
      </el-form-item>
      <el-form-item label="封面图">
        <el-upload
          :action="upload_url"
          list-type="picture-card"
          :file-list="fileList"
          :on-preview="handlePictureCardPreview"
          :on-success="handleAvatarSuccess">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="添加内容">
        <editor ref="myTextEditor"
                :fileName="'files'"
                :canCrop="canCrop"
                :uploadUrl="upload_url"
                v-model="form.content">
        </editor>
      </el-form-item>
      <el-form-item label="是否置顶">
        <el-radio-group v-model="form.top">
          <el-radio label="0">正常</el-radio>
          <el-radio label="1">置顶</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否推荐">
        <el-radio-group v-model="form.recommended">
          <el-radio label="0">正常</el-radio>
          <el-radio label="1">推荐</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发布状态">
        <el-radio-group v-model="form.release_status">
          <el-radio label="0">下架</el-radio>
          <el-radio label="1">发布</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="阅读权限">
        <el-radio-group v-model="form.arcrank">
          <el-radio label="0">仅自己可见</el-radio>
          <el-radio label="1">所有人可见</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="评论状态">
        <el-radio-group v-model="form.review_status">
          <el-radio label="0">禁止评论</el-radio>
          <el-radio label="1">允许评论</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="转载状态">
        <el-radio-group v-model="form.reprinted_status">
          <el-radio label="0">禁止转载</el-radio>
          <el-radio label="1">允许转载</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import editor from '@/components/common/Quilleditor.vue'
  import notify from '@/tools/notify'
  import { UPLOAD_URL } from '@/config/const'

  export default {
    data: function () {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: [
          {name: '', url: ''}
        ],
        canCrop: true,
        cateIds: [],
        defaultProps: {
          value: 'id',
          label: 'name',
          children: '_child'
        }
      }
    },
    components: {
      editor
    },
    computed: {
      ...mapState({
        cover: state => state.article.cover,
        form: state => state.article.articleInfo,
        tree: state => state.article.classTree
      }),
      upload_url () {
        return UPLOAD_URL
      }
    },
    async created () {
      await this.articleInfo()
      await this.articleClassTree()
      this.cateIds = this.form.cate_ids
      this.fileList[0].name = String(this.form.cover_id)
      this.fileList[0].url = String(this.form.cover_absolute)
      this.form.top = String(this.form.top)
      this.form.recommended = String(this.form.recommended)
      this.form.status = String(this.form.status)
      this.form.release_status = String(this.form.release_status)
      this.form.arcrank = String(this.form.arcrank)
      this.form.review_status = String(this.form.review_status)
      this.form.reprinted_status = String(this.form.reprinted_status)
    },
    methods: {
      // 获取文章详情
      async articleInfo () {
        let payload = {
          id: this.$route.params.id
        }
        await this.$store.dispatch('article/articleInfo', payload)
      },
      // 获取文章分类树
      async articleClassTree () {
        await this.$store.dispatch('article/classTree')
      },
      onSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (JSON.stringify(this.cover) !== '{}') {
            this.form.cover_id = this.cover.id
            this.form.cover_relative = this.cover.relative_path + '/' + this.cover.filename
            this.form.cover_absolute = 'http://' + this.cover.save_path + '/' + this.cover.filename
          }
          if (valid) {
            this.$store.dispatch('article/articleEdit', this.form).then(res => {
              notify.success(res.msg)
              this.$router.push('/article/articlelist')
            })
          }
        })
      },
      handleAvatarSuccess (file) {
        const self = this
        if (file.code !== 200) {
          self.$message({
            message: '封面上传失败',
            type: 'error'
          })
        } else {
          self.$message({
            message: '封面上传成功',
            type: 'success'
          })
        }
        self.$store.commit('article/ARTICLE_COVER', file.res)
      },
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      goBack () {
        this.$router.go(-1)
      }
    }
  }
</script>
